<template>
<!--  <Card :bordered="false">-->
<!--   -->
<!--  </Card>-->
  <div>
    <Row :gutter="20">
      <Button type="primary" @click="showAdd" style="margin: 15px;">添加</Button>
      <Select @on-change="query" v-model="selcetId" style="width:200px">
        <Option   v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Table width="50vw" border stripe ref="selection" size="small"  :columns="columns" :data="nowData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" @click="showAll(row)" style="margin-right: 5px">编辑</Button>
          <Button type="error" size="small" @click="remove(row)">删除</Button>
          <Modal
            v-model="modal1"
            title="提示"
            @on-ok="okdel">
            <p>确定要删除此信息吗?删除后将不能恢复</p>
          </Modal>
        </template>
      </Table>
      <Page :total="dataCount" :page-size="cuCarouselBO.size" @on-change="changepage" @on-page-size-change="_nowPageSize"
            show-total show-sizer show-elevator/>
      <Modal title="编辑" v-model="visible" class-name="fl-image-modal"   @on-ok="okEnd">
        <Form :model="saveCuCarouselBO" :label-width="80" style="width: 60vw">
            <FormItem label="标题" style="width:300px">
            <Input v-model="saveCuCarouselBO.cuCarouselName" placeholder="请输入标题"></Input>
          </FormItem>
          <FormItem label="跳转链接" style="width:300px">
            <Input v-model="saveCuCarouselBO.cuCarouselUrl" placeholder="请输入跳转链接"></Input>
          </FormItem>
        </Form>
        <div class="demo-upload-list" v-if="hasImage">
          <img :src="imgUrl"  />
          <div class="demo-upload-list-cover">
<!--            <Icon type="ios-eye-outline" @click.native="handleView(imgUrl)"></Icon>-->
            <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
          </div>
        </div>
        <Upload
          :action="actionUrl"
          :format="['jpg','jpeg','png']"
          :max-size="204800"
          :on-exceeded-size="handleMaxSize"
          :on-success="handleSuccess"
          :show-upload-list="false"
          style=" width:58px;">
          <Button icon="ios-cloud-upload-outline" v-if="imgUrl ==''?true:false">上传图片</Button>
        </Upload>
      </Modal>
<!--      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">-->
<!--        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">-->
<!--          <count-to :end="infor.count" count-class="count-style"/>-->
<!--          <p>{{ infor.title }}</p>-->
<!--        </infor-card>-->
<!--      </i-col>-->
    </Row>
<!--    <Row :gutter="20" style="margin-top: 10px;">-->
<!--      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">-->
<!--        <Card shadow>-->
<!--          <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>-->
<!--        </Card>-->
<!--      </i-col>-->
<!--      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">-->
<!--        <Card shadow>-->
<!--          <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>-->
<!--        </Card>-->
<!--      </i-col>-->
<!--    </Row>-->
    <Row>
<!--      <Card shadow>-->
<!--        <example style="height: 310px;"/>-->
<!--      </Card>-->
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      cityList: [
        {
          value: 0,
          label: 'PC'
        },
        {
          value: 1,
          label: 'APP端首页banner'
        },
        {
          value: 2,
          label: '数字阅读banner'
        },
        {
          value: 3,
          label: '非遗保护banner'
        }
      ],
      modal1: false,
      delRow: {},
      selcetId: 0,
      saveCuCarouselBO: {

        cuCarouselType: 0, // 0PC首页1APP端首页banner2数字阅读banner图上传3非遗保护banner
        cuCarouselId: null,
        cuCarouselName: '',
        cuCarouselImagesUrl: '',
        cuCarouselUrl: '',
        cuTownId: this.$store.state.user.userAll.cuOnlyId
      },
      actionUrl: this.$all.baseUploadURL + '/me-minio/uploadImages',
      hasImage: false,
      imgUrl: '',
      visible: false,
      dataCount: 0,
      columns: [
        {
          title: '序号',
          key: 'cuCarouselId'
        },
        {
          title: '标题',
          key: 'cuCarouselName'
        },
        {
          title: '图片',
          key: 'cuCarouselImagesUrl',
          render: (h, params) => {
            let _img = params.row.cuCarouselImagesUrl
            return h('img', {
              attrs: {
                src: _img,
                style: 'width: 140px;height: 140px;'
              }
              // on:{
              //   click:(e)=>{
              //     let _this=this;
              //     _this.handleView(e.srcElement.currentSrc)  //点击查看大图
              //   }
              // }
            }
            )
          }
        },
        {
          title: '跳转链接',
          key: 'cuCarouselUrl'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }

      ],
      nowData: [],
      inforCardData: [
        { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
        { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
        { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
        { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
        { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
        { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
      ],
      pieData: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      cuCarouselBO: {
        cuCarouselType: null,
        cuTownId: this.$store.state.user.userAll.cuOnlyId,
        size: 10, // 每页显示多少条
        current: 1// 当前页
      },
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      }
    }
  },
  methods: {

    remove (row) {
      this.delRow = row
      this.modal1 = true
    },
    okdel () {
      this.$axios_supermall.post('/cu-carousel/deleteId', this.delRow.cuCarouselId).then(resp => {
        if (resp.data.code == 0) {
          this.$Message.info('删除成功')
          this.query()
        } else {
          this.$Message.info(resp.data.msg)
        }
      })
    },
    okEnd () {
      this.saveCuCarouselBO.cuCarouselImagesUrl = this.imgUrl
      let url = 'saveOne'
      if (this.saveCuCarouselBO.cuCarouselId) {
        url = 'updateOne'
      }
      this.saveCuCarouselBO.cuCarouselType = this.selcetId
      this.$axios_supermall.post('/cu-carousel/' + url, this.saveCuCarouselBO).then(resp => {
        if (resp.data.code == 0) {
          this.$Message.success('处理成功')
          this.query()
        } else if (resp.data.code == 101) {
          this.$Message.error(resp.data.msg)
        }
      })
    },
    showAll (row) {
      this.saveCuCarouselBO = row
      let _this = this
      _this.hasImage = true
      _this.imgUrl = this.saveCuCarouselBO.cuCarouselImagesUrl
      _this.visible = true
    },

    showAdd () {
      if (this.nowData.length >= 5){
        this.$Message.error("轮播图最多为5张");
        return ;
      }
      this.saveCuCarouselBO = {
        cuCarouselName: '',
        cuCarouselImagesUrl: '',
        cuCarouselUrl: '',
        cuTownId: this.$store.state.user.userAll.cuOnlyId,
        cuCarouselType: this.selcetId
      }
      let _this = this
      _this.imgUrl = this.saveCuCarouselBO.cuCarouselImagesUrl
      _this.visible = true
    },
    handleSuccess (res, file) {
      this.imgUrl = res
      this.hasImage = true
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '文件 ' + file.name + '太大,不能超过 2M.'
      })
    },
    handleRemove () {
      this.imgUrl = ''
      this.hasImage = false
    },
    // handleView(url) {
    //
    // },
    changepage (index) {
      this.cuCarouselBO.current = index
      this.query()
    },
    _nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.cuCarouselBO.size = index
    },
    query () {
      this.cuCarouselBO.cuCarouselType = this.selcetId
      this.$Loading.start()
      this.$axios_supermall.post('/cu-carousel/queryPage', this.cuCarouselBO).then(resp => {
        if (resp.data.code == 0) {
          let data = resp.data.data
          this.nowData = data.records
          this.cuCarouselBO.current = data.current
          this.cuCarouselBO.size = data.size
          this.dataCount = data.total
        }
        this.$Loading.finish()
      }).catch(() => {
        this.$Loading.error()
      })
    }
  },
  mounted () {
    this.query()
    //
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}

.demo-upload-list {
  width: 100%;
  display: inline-block;text-align: center;line-height: 60px;
  border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;
  position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;height: 100%;
}
.demo-upload-list-cover {
  display: none;position: absolute;top: 0;bottom: 0;
  left: 0;right: 0;background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;
}
</style>
